<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{color: red; font-size: 30px;}
        
        .box{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            padding: 10px;
            margin: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        var box = document.getElementById("box");
        console.log(box.clientHeight);
        console.log(box.clientWidth);

        //获取视口高度（屏幕高度）
        console.log(document.documentElement.clientHeight);

        //页面的高度
        console.log(document.body.clientHeight);
        
        
            
    </script>


    <p>

clientHeight    获取元素高度包括padding部分，但是不包括border、margin
<br>clientWidth     获取元素宽度包括padding部分，但是不包括border、margin
<br>scrollHeight    元素总高度，它包括padding,但是不包括border、margin包括溢出的不可见内容
<br>scrollWidth     元素总宽度，它包括padding,但是不包括border、margin包括溢出的不可见内容
<br>scrollLeft      元素的水平滚动条向右滚动的像素数量
<br>scrollTop       元素的垂直滚动条向下滚动的像素数量
<br>offsetHeight    元素的CSS垂直高度（单位像素），包括元素本身的高度、padding和border
<br>offsetWidth     元素的CSS水平宽度（单位像素），包括元素本身的高度、padding和border
<br>offsetLeft      到定位父级左边界的间距
<br>offsetTop       到定位父级上边界的间距
    </p>
    <table border="1">
        <tr>
            <td>clientHeight</td>
            <td>获取元素高度包括padding部分，但是不包括border、margin</td>
        </tr>
        <tr>
            <td>clientWidth</td>
            <td>获取元素宽度包括padding部分，但是不包括border、margin</td>
        </tr>
        <tr>
            <td>scrollHeight</td>
            <td>元素总高度，它包括padding,但是不包括border、margin包括溢出的不可见内容</td>
        </tr>
        <tr>
            <td>scrollWidth</td>
            <td>元素总宽度，它包括padding,但是不包括border、margin包括溢出的不可见内容</td>
        </tr>
        <tr>
            <td>scrollLeft</td>
            <td> 元素的水平滚动条向右滚动的像素数量</td>
        </tr>
        <tr>
            <td>scrollTop</td>
            <td> 元素的垂直滚动条向下滚动的像素数量</td>
        </tr>
        <tr>
            <td>offsetHeight</td>
            <td>元素的CSS垂直高度（单位像素），包括元素本身的高度、padding和border</td>
        </tr>
        <tr>
            <td>offsetWidth</td>
            <td>元素的CSS水平宽度（单位像素），包括元素本身的高度、padding和border</td>
        </tr>
        <tr>
            <td>offsetLeft</td>
            <td>到定位父级左边界的间距</td>
        </tr>
        <tr>
            <td>offsetTop</td>
            <td>到定位父级上边界的间距</td>
        </tr>
    </table>
</body>
</html>